<template>
  <el-card class="post">
    <div class="post-title">
      <el-avatar :src="imgUrl+item.user.avatar" fit="fill" :size="45"/>
      <p><span class="user-name">{{ item.user.name }}</span></p>
    </div>
    <div class="post-tag">
      <!--      <el-tag size="mini">标签一</el-tag>-->
      <el-tag size="mini" type="success">标签二</el-tag>
      {{ item.createTime }}


<span v-if="this.$store.state.user!==undefined ">
        <el-tag style="margin-left: 30px;" size="mini" type="warning" icon="el-icon-edit-outline" @click="doEdit(item.id)"
                v-if="item.userId==this.$store.state.user.id">编辑
      </el-tag>

      <el-popconfirm
          title="确定删除吗？"
          @confirm="doDelete(item.id)"
      >
        <el-tag  slot="reference" size="mini" type="danger" icon="el-icon-edit-outline"
                 v-if="item.userId==this.$store.state.user.id">删除
        </el-tag>

      </el-popconfirm>

</span>

      <!--      <el-tag size="mini" type="info">标签三</el-tag>-->
      <!--      <el-tag size="mini" type="warning">标签四</el-tag>-->
      <!--      <el-tag size="mini" type="danger">标签五</el-tag>-->
    </div>
    <el-divider></el-divider>
    <p @click="goToPostDetail" class="title pointer"
       style=" margin: 10px 0; font-weight: bold; font-size: 1.1em; text-align: left;">{{ item.title }}</p>
    <div class="post-content" :class="showContent?'':'max-height-105'">
      <img :src="imgUrl+item.faceImage">
      <span class="post-recommend" @click="goToPostDetail" style="margin-left: 1em;">
        {{ item.recommend }}

</span>
      <!--      The interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths a-->

      <!--      <el-image @click="showContent=!showContent" :src="imgUrl+item.faceImage" fit="cover"-->
      <!--                style=" min-width: 190px;height: 105px; display: inline-block;"></el-image>-->
      <div style="margin-left: 1.5em; width: 70%; text-overflow: ellipsis; overflow-y: hidden;">
      </div>
    </div>


    <transition name="el-fade-in-linear">
      <el-tag v-show="showContent" style="margin-top: 30px; border-radius: 50%;" type="primary"
              @click="showContent=!showContent">
        <el-icon class="el-icon-arrow-up"></el-icon>
      </el-tag>
    </transition>

    <transition name="el-zoom-in-top">
      <mavon-editor style="width: 100% ;margin-top: 30px;" v-if="(showContent)&&(item.content)" v-model="item.content"
                    :toolbars-flag="false" :subfield="false" default-open="preview"/>
    </transition>


    <div class="post-action">


      <el-button size="mini" type="primary" @click="showContent=!showContent">查看</el-button>
      <el-button icon="el-icon-caret-top" size="mini" type="primary">赞同(1000)</el-button>
      <el-button icon="el-icon-caret-bottom" size="mini" type="danger">(100)</el-button>
      <el-button icon="el-icon-chat-dot-square" size="mini">评论(100)</el-button>
      <el-button icon="el-icon-star-off" size="mini" circle></el-button>


    </div>
  </el-card>
</template>

<script>
import service from "@/api";
import post from "@/api/post";

export default {
  name: "PostItem",
  props: ["item"],
  data() {
    return {
      imgUrl: service.imageURL,
      showContent: false,
      // item:{
      //   "agreement": 0,
      //   "content": "",
      //   "createTime": "",
      //   "disagree": 0,
      //   "faceImage": "",
      //   "id": 0,
      //   "questionId": 0,
      //   "title": "",
      //   "updateTime": "",
      //   "userId": 0
      // }
    };
  },
  methods: {
    goToPostDetail() {
      console.log(111)
      this.$router.push({path: '/postDetail', query: {id: this.item.id}})
    },
    doEdit(id) {
      this.$router.push({path: '/postSender', query: {id}})
    },
    doDelete(id) {
      post.delPost(id).then(res => {
        if (res == true) {
          this.$message.success("删除成功!");
          this.$router.go(0);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.pointer {
  cursor: pointer;
}

.user-name {
  font-size: 1.3em;
  color: #2c3e50;
}

.create-time {
  font-size: .5em;
}


.max-height-105 {
  max-height: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;

}
.el-tag{
  cursor: pointer;
}
.post {
  width: 100%;
  margin: 0 auto;
  text-align: left;

  .post-tag {
    display: flex;
    justify-content: flex-end;

    .el-tag {
      margin-right: 10px;
    }

  }

  .post-content {
    //display: flex;
    //justify-content: left;
    //max-height: 105px;
    //overflow-y: hidden;

    img {
      min-width: 190px;
      height: 105px;
      float: left;
      clear: both;
      margin-right: 10px;
      object-fit: cover;
    }

    .post-recommend {
      cursor: pointer;
    }

    .el-image {
      border-radius: 5px;
    }
  }


  .el-divider {
    margin: 10px 0;
  }

  .post-title {
    display: flex;


    p {
      color: #8c939d;
      margin: 0 10px;
      line-height: 45px;
    }
  }

  .post-action {
    display: flex;
    justify-content: end;
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
</style>
